<template>
  <div>
    <van-tabs sticky>
      <van-tab title="我的督导">
        <SelectDateSearchVue @success="getTime"></SelectDateSearchVue>
        <van-collapse v-model="active">
          <template v-for="(unit, key) in dataList">
            <van-collapse-item :key="key" :title="unit.name" :name="key">
              <div class="unit" v-for="(data, index) in unit.subList" :key="index">
                <div class="header">
                  <img class="avator" v-if="data.chatType == 1" :src="data.fromAvatar" alt="" />
                  <img class="avator" v-else src="@/assets/avatar.jpg" alt="" />
                  <div class="name">
                    <span class="name-nowarp" v-if="data.chatType == 1">
                      {{ data.fromName }}
                      <img class="sex" v-if="data.fromGender == 0" src="@/assets/man.png" />
                      <img class="sex" v-else-if="data.fromGender == 1" src="@/assets/woman.png" />
                    </span>
                    <span class="name-nowarp" v-else>
                      {{ data.roomName }}
                    </span>
                    <div style="font-size: 14px; font-weight: 500;" :class="{ color1: true, color2: false }">@微信</div>
                  </div>
                  <div class="state">
                    <div>
                      <span
                        class="state-value"
                        :class="{ 'state-type1': data.replyStatus == 1, 'state-type1': data.replyStatus == 2 }"
                      >
                        {{ data.replyStatus == 1 ? '未回复' : '已回复' }}
                      </span>
                    </div>
                    <div class="date">
                      {{ data.replyTime }}
                    </div>
                  </div>
                </div>
                <van-divider :style="{ color: '#E5E6EB;', borderColor: '#E5E6EB', padding: '16px 0', margin: '0' }">
                </van-divider>
                <div class="alert-time">
                  <div class="date">{{ data.createTime }}</div>
                  <div class="alert-con">超时约{{ data.timeMinutes }}分钟</div>
                </div>
                <div style="margin: 16px 0;">
                  <ShowChatVue :unit="data"></ShowChatVue>
                </div>
              </div>
            </van-collapse-item>
          </template>
        </van-collapse>
      </van-tab>
      <van-tab title="我的质检">
        <RecordListVue></RecordListVue>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
  import { getRuleList, getNoticeList } from '@/api/quality.js'
  import SelectDateSearchVue from '../../components/SelectDateSearch.vue'
  import RecordListVue from './recordList.vue'
  import ShowChatVue from './ShowChat.vue'
  export default {
    name: 'record-list-manage',
    components: {
      RecordListVue,
      SelectDateSearchVue,
      ShowChatVue
    },
    data() {
      return {
        active: [0],
        list: [],
        dataList: [],
        query: {
          type: 1,
          pageNum: 1,
          pageSize: 10000,
          beginTime: '',
          endTime: ''
        }
      }
    },
    methods: {
      getTime(data) {
        this.query.beginTime = data.beginTime
        this.query.endTime = data.endTime
        this.getData()
      },
      getData() {
        getRuleList({
          manageUserId: sessionStorage.userId,
          pageSize: 1000,
          pageNum: 1,
          isShow: false
        }).then((res) => {
          this.dataList = res.rows
          this.getSubList()
        })
      },
      async getSubList() {
        if (this.dataList.length) {
          await Promise.all(
            this.dataList.map(async (item) => {
              let data = await getNoticeList(Object.assign(this.query, { ruleId: item.id }))
              item.subList = data.rows
            })
          )
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  /deep/ .van-tabs__line {
    background-color: #07c160;
  }
  /deep/ .van-tab {
    font-size: 17px;
    color: #1d2129;
  }
  /deep/ .van-tab--active {
    color: #07c160;
  }
  /deep/ .van-tabs--line .van-tabs__wrap {
    height: 56px;
    border-bottom: 1px solid #e5e6eb;
  }
  /deep/ .van-cell {
    height: 60px;
    line-height: 40px;
  }
  /deep/ .van-cell__right-icon {
    height: 40px;
    font-size: 16px;
    line-height: 40px;
    color: #1d2129;
    font-weight: 600;
  }
  /deep/ .van-cell__title {
    font-size: 17px;
    font-weight: 600;
    color: #1d2129;
  }
  /deep/ .van-collapse-item__content {
    background: #f7f8fa;
    padding: 0;
  }

  .unit {
    margin: 16px 0;
    background: #fff;
    padding: 16px;
    .header {
      display: flex;
      justify-content: space-between;
      justify-items: center;
      .avator {
        flex-shrink: 0;
        margin-right: 16px;
        width: 58px;
        height: 58px;
        border-radius: 8px 8px 8px 8px;
      }
      .name {
        flex: 1;
        width: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 4px 0;
        font-size: 16px;
        font-weight: 600;
        color: #1d2129;
        .name-nowarp {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .sex {
          margin-left: 4px;
          width: 16px;
          height: 16px;
        }
        .color1 {
          color: #f6a723;
        }
        .color2 {
          color: #1869ff;
        }
      }
      .state {
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding-bottom: 4px;
        text-align: right;
        .state-value {
          flex-grow: 0;
          height: 24px;
          border-radius: 16px;
          font-size: 12px;
          padding: 4px 8px;
        }
        .state-type1 {
          border: 1px solid #f53f3f;
          background: #fdebeb;
          color: #f53f3f;
        }
        .state-type2 {
          border: 1px solid #07c160;
          background: #e6f8ef;
          color: #07c160;
        }
      }
    }
    .date {
      font-size: 14px;
      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
      font-weight: 400;
      color: #4e5969;
    }
    .alert-time {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .alert-con {
        font-size: 14px;
        font-weight: 400;
        color: #f53f3f;
      }
    }
    .buttom {
      display: flex;
      margin-top: 16px;
      padding: 0 12px;
      .chat {
        flex: 1;
        text-align: center;
        height: 44px;
        line-height: 44px;
        background: linear-gradient(90deg, #07c160 0%, #90de45 99%);
        border-radius: 16px;
        font-size: 18px;
        font-weight: 600;
        color: #ffffff;
      }
      .chated {
        margin-left: 16px;
        flex: 1;
        text-align: center;
        height: 44px;
        line-height: 44px;
        font-size: 18px;
        font-weight: 600;
        border: 1px solid #07c160;
        border-radius: 16px;
        color: #07c160;
      }
    }
  }
</style>
